import React, { useEffect, useState } from 'react'
import HandelSearch from '../HandelSearch/HandelSearch'
import TabTerminal from '../HandelSearch/TabTerminal'

import { Tag, Modal, message, Popconfirm, Drawer } from 'antd'
import "./index.css"
import AddParticulars from '../HandelSearch/AddParticulars'
import { fetchRequest } from '@/utils/Request'
import { url } from '@/utils/url'
import { useRequest } from '@umijs/hooks'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import Compile from '../HandelSearch/Compile'
const { confirm } = Modal;
interface RecordParams {
    devLocation: string,
    devModelId: string,
    devName: string,
    index: number,
    num: number,
    devType: number,
    devMapLocation: string,
    latitude: number,
    longitude: number,
}

const tiitle = "设备列表"

// 终端管理 -- 视屏设备管路
function Index() {
    const columns = [
        {
            title: '校区地址',
            key: 'devLocation',
            dataIndex: 'devLocation',
        },
        {
            title: '详细位置',
            key: 'devMapLocation',
            dataIndex: 'devMapLocation'
        },

        {
            title: '设备类型',
            key: 'deviceModel',
            dataIndex: 'deviceModel',
        },
        {
            title: '设备名称',
            key: 'devName',
            dataIndex: 'devName',
        },
        {
            title: '终端序列',
            key: 'hostId',
            dataIndex: 'hostId',
        },
        {
            title: '创建人员',
            key: 'createUser',
            dataIndex: 'createUser',
        },
        {
            title: '创建时间',
            key: 'createDate',
            dataIndex: 'createDate',
        },
        // {
        //     title: '状态',
        //     key: 'state',
        //     dataIndex: 'state',
        //     render: (state: string) => {
        //         return state === "已生效" ? <Tag color="#3ae0b0">已生效</Tag> : state === "未生效" ? <Tag color="#f50">未生效</Tag> :
        //             <Tag color="#2db7f5">待推送</Tag>;
        //     }
        // },
        {
            title: "状态",
            dataIndex: "terminalState",
            render: (record: any) => {
                return record === 1 ? <Tag color="#3ae0b0">在线</Tag> : record === 2 ? <Tag color="#f50">离线</Tag> :
                    <Tag color="#2db7f5">未知</Tag>;
            }
        },
        {
            title: "操作",
            render: (record: any) => <span onClick={e => e.stopPropagation()}>
                <Tag className="tags-hover" color="#00BFFF"  icon={<EditOutlined />} onClick={() => setmodifyVisible({ visible: true, content: record })}>编辑</Tag>
                <Popconfirm
                    title="确定要删除？"
                    onConfirm={(e: any) => {
                        deleteVideoDev.run({
                            deviceCode: record.deviceCode, deviceType: 2
                        })
                    }}
                >
                    <Tag className="tags-hover delete" color="#f50" icon={<DeleteOutlined />}>删除</Tag>
                </Popconfirm>
            </span>
        }
    ]
    const [addVisible, setaddVisible] = useState(false);
    const [tableTitle, settableTitle] = useState("新增视频设备")
    const [tableData, settableData] = useState([]) // 表格数据
    const isSearch = "videoTerminal"
    const [modifyVisible, setmodifyVisible] = useState({ visible: false, content: null })
    const [RecordParams, setRecordParams] = useState<RecordParams>({
        devLocation: "",
        devModelId: "",
        devName: "",
        index: 1,
        num: 10,
        devType: 2,
        devMapLocation: "",
        latitude: 0,
        longitude: 0,
    }) // 设置默认表格参数

    //点击搜索按钮修改表格参数
    function handleFinish(values: any) {
        setRecordParams({ ...values, index: 1, num: 10, devType: 2 })
        const params = {
            ...values, index: 1, num: 10, devType: 2,
        };
        getTableData.run(params)
    }


    // 请求表格数据
    async function getVideoList(params: any) {
        try {
            const json = await fetchRequest(url.GET_VIDOLIST, params);
            if (json.success) {
                settableData(json)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    // 发送表格数据请求传参
    const getTableData = useRequest(getVideoList, {
        manual: true,
        loadingDelay: 200
    })

    // 删除表格接口
    async function deleteVideo(params: any) {
        try {
            const json = await fetchRequest(url.GET_DELETEVIDODEV, params);
            if (json.success) {
                message.destroy();
                message.success("删除成功！");
                getTableData.run(RecordParams)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }
    // 发送删除表格请求
    const deleteVideoDev = useRequest(deleteVideo, {
        manual: true,
        loadingDelay: 200
    })

    //新增成功的调用
    function addSuccess() {
        message.destroy();
        message.success("新增成功!");
        setaddVisible(false);
        getTableData.run(RecordParams)
    }

    // 更改页码跳转
    const pageChange = (page: any) => {
        const params = {
            ...RecordParams, index: page,
        };
        getTableData.run(params)
    }

    // 新增按钮
    function addEquipment() {
        setaddVisible(true)
        settableTitle("新增视频设备")
    }
    useEffect(()=> {
        getTableData.run(RecordParams)
    }, [])

     // 修改信息
     const modification = ()=>{
        message.success("修改成功!");
        setmodifyVisible({ content: modifyVisible.content, visible: false })
        getTableData.run(RecordParams)
    }
    return (
        <div>
            <HandelSearch handleFinish={handleFinish} isSearch={isSearch} />
            <TabTerminal columns={columns} tiitle={tiitle} addEquipment={addEquipment} tableData={tableData} pageChange={pageChange} handleFinish={handleFinish}/>
            <AddParticulars addSuccess={addSuccess} addVisible={addVisible} setaddVisible={setaddVisible} isSearch={isSearch} tableTitle={tableTitle} />
            <Drawer width="800px" visible={modifyVisible.visible} title="修改信息" destroyOnClose onClose={() => setmodifyVisible({ content: modifyVisible.content, visible: false })}>
            <Compile content={modifyVisible.content} isSearch={isSearch} modification={modification}></Compile>
            </Drawer>
        </div>
    )
}

export default Index
